<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,user-scalable=0" name="viewport">
    <title>储值卡充值详情</title>
    <link href="../../public/plugin/weui/weui.min.css" rel="stylesheet">
    <link href="../../public/plugin/jquery-weui/css/jquery-weui.min.css" rel="stylesheet">
    <link href="../../public/plugin/vant/index.css" rel="stylesheet">
    <link href="../../public/css/iconfont.css?v=20210227" rel="stylesheet">
    <link href="../../public/css/common.css" rel="stylesheet">
</head>

<style type="text/css">
</style>

<body>
<div id="app" style="overflow-y: auto;" v-cloak>
    <!-- 列表 -->
    <van-list
            :finished="finished"
            @load="onLoad"
            finished-text="没有更多了"
            v-model="loading"
    >
        <van-cell :key="item.id"
                  :title="'【'+item.rechargeTypeName+'】'"
                  :value="'￥'+item.rechargeAmount"
                  center
                  clickable
                  size="large"
                  title-style="flex:2"
                  v-for="item in rechargeRecord">
            <div slot="label">
                <span>充值时间：{{item.rechargeDate}}</span>
            </div>
        </van-cell>
    </van-list>
    <van-empty description="暂无数据" v-show="rechargeRecord.length === 0"></van-empty>
    <div @click="WXUtils.goHome()" class="home-btn">
        <img alt="" src="../../public/image/icon/home.svg">
    </div>
</div>
<script src="../../public/plugin/jquery/jquery.min.js" type="text/javascript"></script>
<script src="../../public/plugin/jquery-weui/js/jquery-weui.min.js" type="text/javascript"></script>
<script src="../../public/plugin/vue/vue.min.js" type="text/javascript"></script>
<script src="../../public/plugin/vant/vant.min.js" type="text/javascript"></script>
<script src="../../public/plugin/moment/moment.min.js" type="text/javascript"></script>
<script src="../../public/js/common.js?v=20230726011" type="text/javascript"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            rechargeRecord: [],
            loading: false,
            finished: false,
            queryParams: {
                page: 0,
                size: 20,
                sortName: 'id',
                sortOrder: 'desc',
                params: {
                    cardNo: ''
                }
            }
        },
        mounted: function () {
            let self = this;
            self.queryParams.params.cardNo = getUrlParam("cardNo");
        },
        methods: {
            onLoad: function () {
                console.log('onload');
                let self = this;
                if (self.queryParams.params.cardNo) {
                    self.queryParams.page = self.queryParams.page + 1;
                    self.getRechargeRecord();
                } else {
                    self.loading = false;
                }
            },
            getRechargeRecord: function () {
                let self = this;
                CardUtils.getCardRechargeRecord(self.queryParams).then(function (res) {
                    console.log('getCardRechargeRecord');
                    if (res && res.code === 200) {
                        self.rechargeRecord = self.rechargeRecord.concat(res.data.records)
                        // 数据全部加载完成
                        if (!res.data.hasNextPage) {
                            self.finished = true;
                        }
                    }

                }).fail(function (err) {
                    console.log(err);
                    self.loading = false;
                })
            }
        }
    });
</script>
</body>
</html>
